<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" active-color="#1893FC"
			 bar-width="150"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{'height': windowHeight + 'px'}">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<view class="title">案件信息</view>
						<u-gap height="30"></u-gap>
						<view class="panel">
							<label class="n-input">
								<text>案件编号</text>
								<u-input v-model="form.b1.t1" disabled="disabled" inputAlign="right" placeholder="案件编号" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>案件来源</text>
								<u-input v-model="form.b1.t2" disabled="disabled" inputAlign="right" placeholder="案件来源" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>案件类型</text>
								<u-input v-model="form.b1.t3" disabled="disabled" inputAlign="right" placeholder="案件类型" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>执法主体</text>
								<u-input v-model="form.b1.t4" disabled="disabled" inputAlign="right" placeholder="执法主体" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>执法人员</text>
								<u-input v-model="form.b1.t5" disabled="disabled" inputAlign="right" placeholder="执法人员" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>执法地点</text>
								<u-input v-model="form.b1.t6" disabled="disabled" inputAlign="right" placeholder="执法地点" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>案件类别</text>
								<u-input v-model="form.b1.t7" disabled="disabled" inputAlign="right" placeholder="简易" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>是否立案</text>
								<u-input v-model="form.b1.t8" disabled="disabled" inputAlign="right" placeholder="立案登记" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>案由</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b1.t10" :autoHeight="true" placeholder="案由" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>案件描述</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b1.t11" :autoHeight="true" placeholder="案件描述" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
						</view>
						<u-gap height="30"></u-gap>
						<view class="title">
							当事人信息
						</view>
						<u-gap height="30"></u-gap>
						<view class="panel">
							<label class="n-input">
								<text>当事人类型</text>
								<u-input v-model="form.b2.t1" disabled="disabled" inputAlign="right" placeholder="当事人类型" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>当事人</text>
								<u-input v-model="form.b2.t2" inputAlign="right" placeholder="当事人" disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>证件类型</text>
								<u-input v-model="form.b2.t3" inputAlign="right" placeholder="身份证" disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>证件号</text>
								<u-input v-model="form.b2.t4" inputAlign="right" placeholder="735530197211030441" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>联系电话</text>
								<u-input v-model="form.b2.t5" inputAlign="right" placeholder="18888888888" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>联系地址</text>
								<u-input v-model="form.b2.t6" inputAlign="right" placeholder="山西省XXXXXXXXX" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
						</view>
						<u-gap height="30"></u-gap>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<view class="title">
							案件信息
						</view>
						<u-gap height="30"></u-gap>
						<view class="panel">
							<label class="n-input">
								<text>违法事实</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b3.t2" :autoHeight="true" placeholder="违法事实" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>违法依据</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b3.t3" :autoHeight="true" placeholder="违法依据" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>取证时间</text>
								<u-input v-model="form.b3.t4" disabled="disabled" inputAlign="right" placeholder="当事人类型" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>取证地点</text>
								<u-input v-model="form.b3.t5" disabled="disabled" inputAlign="right" placeholder="当事人类型" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>描述</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b3.t6" :autoHeight="true" placeholder="违法依据" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
						</view>
						<u-gap height="30"></u-gap>
						<view class="title">
							当事人信息
						</view>
						<u-gap height="30"></u-gap>
						<view class="panel">
							<label class="n-input">
								<text>当事人类型</text>
								<u-input v-model="form.b2.t1" disabled="disabled" inputAlign="right" placeholder="当事人类型" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>当事人</text>
								<u-input v-model="form.b2.t2" inputAlign="right" placeholder="当事人" disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>证件类型</text>
								<u-input v-model="form.b2.t3" inputAlign="right" placeholder="身份证" disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>证件号</text>
								<u-input v-model="form.b2.t4" inputAlign="right" placeholder="735530197211030441" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>联系电话</text>
								<u-input v-model="form.b2.t5" inputAlign="right" placeholder="18888888888" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
							<label class="n-input">
								<text>联系地址</text>
								<u-input v-model="form.b2.t6" inputAlign="right" placeholder="山西省XXXXXXXXX" disabled="disabled"
								 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
							</label>
						</view>
						<u-gap height="30"></u-gap>
						<view class="title">
							案件材料
						</view>
						<u-gap height="30"></u-gap>
						<view class="picList panel">
							<template v-for="item in form.b3.list">
								<view class="pic" @click="goUrl">
									<image :src="item.img" mode="widthFix"></image>
								</view>
							</template>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<view class="title">
							案件信息
						</view>
						<u-gap height="30"></u-gap>
						<view class="panel" style="padding: 0;">
							<u-cell-group>
								<u-cell-item title="文件材料1.docx" value="查看"></u-cell-item>
								<u-cell-item title="文件材料2.docx" value="查看"></u-cell-item>
								<u-cell-item title="文件材料3.docx" value="查看"></u-cell-item>
							</u-cell-group>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<view class="panel">
							<label class="n-input">
								<text>违法事实</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b4.t1" :autoHeight="true" placeholder="违法事实" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>违法依据</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b4.t2" :autoHeight="true" placeholder="违法依据" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>处罚依据</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b4.t3" :autoHeight="true" placeholder="处罚依据" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>处罚内容</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b4.t4" :autoHeight="true" placeholder="处罚内容" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>处罚告知时间</text>
								<view class="n-input-right">
									<u-input v-model="form.b4.t5" :autoHeight="true" placeholder="处罚告知时间" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<view class="panel">
							<label class="n-input">
								<text>决定类别</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t1" :autoHeight="true" placeholder="决定类别" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>处罚决定种类</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t2" :autoHeight="true" placeholder="处罚决定种类" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>处罚内容</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b5.t3" :autoHeight="true" placeholder="处罚内容" inputAlign="right"
									 disabled="disabled" placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>决定日期</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t4" :autoHeight="true" placeholder="决定日期" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>决定文书号</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t5" :autoHeight="true" placeholder="决定文书号" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<!-- <label class="n-input">
								<text>决定书</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.b5.t6" :autoHeight="true" placeholder="决定书" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label> -->
							<label class="n-input">
								<text>决定书文件</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t6" :autoHeight="true" placeholder="查看" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>送达方式</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t7" :autoHeight="true" placeholder="送达方式" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>送达日期</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t8" :autoHeight="true" placeholder="送达日期" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>送达回证</text>
								<view class="n-input-right">
									<u-input v-model="form.b5.t9" :autoHeight="true" placeholder="送达回证" inputAlign="right" disabled="disabled"
									 placeholder-style="color: rgba(0,0,0,0.8);"></u-input>
								</view>
							</label>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '资料信息'
				}, {
					name: '调查取证'
				}, {
					name: '文书材料'
				}, {
					name: '处罚告知'
				}, {
					name: '处罚决定'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				windowHeight: '',
				form: {
					b1: {
						t1: '立字〔2020〕5号',
						t2: '巡查上报',
						t3: '行政执法',
						t4: '忻州市城市管理局',
						t5: '付德君 张德红',
						t6: '七一路',
						t7: '一般案件',
						t8: '立案登记',
						t9: '否',
						t10: '2020年4月6日，我局执法队日常巡查过程中，发现七一路有混凝土车沿途抛洒、带泥上路现象。',
						t11: '2020年4月6日，尧阳景苑工地使用的混凝土车，未采取密闭、苫盖和清洗措施，致使混凝土车沿途抛洒带泥上路，对路面造成污染，影响市容市貌。'
					},
					b2: {
						t1: '法人',
						t2: '乌率航',
						t3: '统一社会信用代码',
						t4: '91140902MAOKJAPD11',
						t5: '13603500340',
						t6: '忻州市忻府区云中北路御景园小区C座临街13号底商铺',
						t7: ''
					},
					b3: {
						t1: '现场检查（勘验）笔录、现场照片、调查笔录',
						t2: '采取密闭、苫盖和清洗措施，致使混凝土车沿途抛洒、带泥上路，对路面造成污染，影响市容市貌。',
						t3: '《城市建筑垃圾管理办法》第十四条',
						t4: '2020年4月6日',
						t5: '七一北路',
						t6: '现场发现混凝土车运输过程中，有沿途抛洒、带泥上路现象。',
						list: [{
							type: 'img',
							img: require('@/static/img/a01.jpg'),
							url: require('@/static/img/a01.jpg')
						}, {
							type: 'video',
							img: require('@/static/img/a02.png'),
							url: 'https://zhaoyaojing.91wlc.com/demo.mp4'
						}]
					},
					b4: {
						t1: '2020年4月6日忻州市巨广升商贸有限公司混凝土运输车辆在七一路进行运输混凝土，造成沿途抛洒、带泥上路的行为，该行为给城市道路路面造成长距离污染。',
						t2: '《城市建筑垃圾管理办法》第十四条',
						t3: '《城市建筑垃圾管理办法》第二十三条',
						t4: '依据《城市建筑垃圾管理办法》第二十三条规定，决定给予行政处罚5000元罚款。',
						t5: '2020年4月9日'
					},
					b5: {
						t1: '行政处罚',
						t2: '罚款',
						t3: '依据《城市建筑垃圾管理办法》第二十三条规定，本机关现责令你（单位）对运输过程中遗漏、抛洒、带泥上路路段遗漏、抛洒物立即清理，并决定给予行政处罚5000元罚款。',
						t4: '2020年4月15日',
						t5: '罚字〔2020〕5号',
						t6: '附',
						t7: '当面送达',
						t8: '2020.04.15',
						t9: '附'
					}
				}
			};
		},
		onLoad() {
			this.getSystemHeight()
		},
		methods: {
			goUrl: function () {
				uni.setStorageSync('list', JSON.stringify(this.form.b3.list))
				uni.navigateTo({
					url: '/pages/picShow/picShow'
				})
			},
			getSystemHeight: function() {
				const res = uni.getSystemInfoSync()
				this.windowHeight = res.windowHeight - res.windowTop
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx;
	}

	.panel {
		border-radius: 10rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
	}

	.n-input {
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba($color: #000000, $alpha: .06);
		padding: 10rpx;
		width: 100%;
		box-sizing: border-box;

		text {
			color: rgba($color: #000000, $alpha: 0.5);
			width: 180rpx;
		}

		uni-picker {
			flex: 1;
			text-align: right;
			height: 70rpx;

			.uni-input {
				line-height: 70rpx;

				&.noValue {
					color: rgba($color: #000000, $alpha: 0.3);
				}
			}

		}

		.n-input-right {
			flex: 1;
			text-align: right;
		}
	}

	.btns {
		display: flex;

		view {
			flex: 1;

			&:nth-child(1) {
				margin-right: 20rpx;
			}
		}
	}

	video {
		width: 100%;
	}

	.title {
		font-size: 32rpx;
		text-indent: 30rpx;
	}
	.picList {
		display: flex; align-items: center; justify-content: start;
		.pic {
			flex: 1 1 30%;
			margin-right: 20rpx;
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 100%;
			}
		}
	}
</style>
